<template>
  <z-result
    class="error-result"
    status="error"
    title="Submission Failed"
    sub-title="Please check and modify the following information before resubmitting."
  >
    <template #extra>
      <z-button key="console" type="primary">Go Console</z-button>
      <z-button key="buy">Buy Again</z-button>
    </template>

    <div class="desc">
      <p style="font-size: 16px">
        <strong>The content you submitted has the following error:</strong>
      </p>
      <p>
        <close-circle-outlined :style="{ color: 'red' }" />
        Your account has been frozen
        <a>Thaw immediately &gt;</a>
      </p>
      <p>
        <close-circle-outlined :style="{ color: 'red' }" />
        Your account is not yet eligible to apply
        <a>Apply Unlock &gt;</a>
      </p>
    </div>
  </z-result>
</template>

<script>
import { CloseCircleOutlined } from '@ant-design/icons-vue'
import { defineComponent } from 'vue'

export default defineComponent({
  components: {
    CloseCircleOutlined
  }
})
</script>

<style lang="less">
.error-result {
  .ant-result-content {
    margin-top: 24px;
    padding: 24px 40px;
    background-color: #EBECF1;
  }
  .desc p {
    margin-bottom: 1em;
  }
}
</style>
